<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>克里斯笔记-注册</title>
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/image/favicon.ico" />
<script src="${pageContext.request.contextPath}/js/jquery-3.5.0.min.js"></script>
<style type="text/css">
	/*设置昵称框，密码框，邮箱框，注册按钮的样式*/
	[name="userName"],[name="userPwd"],[name="userPwd1"],[name="userEmail"],#submitBtn
	{
		width:350px;
		height:45px;
		font-size:20px
	}
</style>
<script>
	//获取邮箱验证码
	function getEmailCheckCode()
	{
		if(!checkEmail()) return;
		$.ajax(
		{
			url:"${pageContext.request.contextPath}/getEmailCheckCode",
			type:"post",
			data:JSON.stringify({userEmail:$("[name='userEmail']").val()}),
			contentType:"application/json;charset=UTF-8",
			dataType:"text",
			success:function(data)
			{
				if(data=="infoError") alert("电子邮箱格式不合法！");
				else if(data=="success") alert("邮箱验证码获取成功！");
				else if(data!="") alert("请等待"+(60-data)+"秒后获取！");
			}
		});
	}
	//注册
	function register()
	{
		if(!checkForm()) return false;
		$.ajax(
		{
			url:"${pageContext.request.contextPath}/userRegister",
			type:"post",
			data:$("#registerForm").serialize(),
			dataType:"text",
			success:function(data)
			{
				if(data=="infoError") alert("注册信息填写不符合要求！");
				else if(data=="userNameUsed") alert("该昵称已被使用！");
				else if(data=="userEmailRegistered") alert("该电子邮箱已被注册！");
				else if(data=="noEmailCheckCode") alert("请先获取邮箱验证码！");
				else if(data=="emailCheckCodeExpired") alert("邮箱验证码已过期！");
				else if(data=="emailCheckCodeError") alert("邮箱验证码错误！");
				else if(data=="registerFailed") alert("注册失败！");
				else if(data=="success")
				{
					alert("注册成功，已为您自动登录！");
					location.href="${pageContext.request.contextPath}/index";
				}
			}
		});
		return false;
	}
	//验证输入的信息是否符合规范
	function checkForm()
	{
		//判断昵称是否符合规范
		var value=$("[name='userName']").val();
		if(!isEmpty(value,"昵称")) return false;
		if(Object.keys(value).length>10)
		{
			alert("昵称长度不能超过10个字符！");
			return false;
		}
		//判断昵称是否符合规范的正则表达式，不能包含符号
		var regex=/^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
		if(!isRight(regex,value,"昵称不能包含符号！")) return false;
		//判断密码是否符合规范
		value=$("[name='userPwd']").val();
		if(!isEmpty(value,"密码")) return false;
		//判断密码是否符合规范的正则表达式，长度6~16，由数字和字母组成
		regex=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
		if(!isRight(regex,value,"密码长度必须在6~16之间，包含数字和字母！")) return false;
		if(value!=$("[name='userPwd1']").val())
		{
			alert("两次输入的密码不一致！");
			return false;
		}
		//判断电子邮箱是否符合规范
		if(!checkEmail()) return false;
		value=$("[name='emailCheckCode']").val();
		//判断邮箱验证码是否符合规范
		if(!isEmpty(value,"邮箱验证码")) return false;
		if(Object.keys(value).length!=6)
		{
			alert("验证码的长度应为6")
			return false;
		}
		return true;
	}
	//验证电子邮箱输入框
	function checkEmail()
	{
		var value=$("[name='userEmail']").val();
		if(!isEmpty(value,"电子邮箱")) return false;
		//验证电子邮箱格式的正则表达式
		var regex=/^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;
		if(!isRight(regex,value,"电子邮箱格式不合法！")) return false;
		return true;
	}
	//判断输入的信息是否符合规范，参数regex是用于验证的正则表达式，参数msg表示当输入的信息不符合规范时弹出的提示信息
	function isRight(regex,value,msg)
	{
		if(!regex.test(value))
		{
			alert(msg);
			return false;
		}
		return true;
	}
	//判断输入的信息是否为空，参数msg表示当输入的信息为空时弹出的提示信息
	function isEmpty(value,msg)
	{
		if(value=="")
		{
			alert("请输入"+msg+"！");
			return false;
		}
		return true;
	}
</script>
</head>
<body>
	<br/><br/>
	<h1 align="center">克里斯笔记-注册</h1>
	<div align="center">
		<form id="registerForm">
			<input type="text" name="userName" placeholder="昵称（长度10以内，不能包含符号）" autofocus="autofocus"/><br/><br/>
			<input type="password" name="userPwd" placeholder="密码（长度6~16，包含数字和字母）"/><br/><br/>
			<input type="password" name="userPwd1" placeholder="确认密码"/><br/><br/>
			<input type="text" name="userEmail"  placeholder="电子邮箱"/><br/><br/>
			<input type="text" name="emailCheckCode" style="width:246px;height:45px;font-size:20px" placeholder="邮箱验证码"/>
			<input type="button" value="点击获取" style="width:100px;height:45px;font-size:20px" onclick="getEmailCheckCode()"/><br/><br/>
			<input type="submit" id="submitBtn" value="注册" onclick="return register()"/>
		</form>
	</div>
</body>
</html>